<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>订单详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="stylesheet" href="../css/mui.picker.css" />
		<link rel="stylesheet" href="../css/mui.poppicker.css" />
		<link rel="stylesheet" href="../css/feedback.css" />
		<link rel="stylesheet" href="../css/mui.imageviewer.css" />

		<!--图标-->
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />
		<style>
			html {
				font-size: 100%;
				#background-color: #fff;
			}
			
			h5 {
				margin: 5px 7px;
			}
			
			.mui-card .mui-control-content {
				padding: 10px;
			}
			/*.mui-control-content {
				height: 550px;
			}*/
			
			ul {
				font-size: 14px;
				color: #333333;
			}
			
			.mui-btn {
				padding: 10px;
			}
			
			#kefu {
				font-size: 0.5rem;
				line-height: 30px;
			}
			
			header button img {
				width: 0.3rem;
			}
			
			.mui-bar {
				box-shadow: 0 0 1px rgba(255, 255, 255, 1);
			}
			
			.mui-content {
				#background-color: #fff;
			}
			
			.mui-segmented-control {
				border-bottom: 3px solid #eeeeee!important;
			}
			
			.mui-content .mui-segmented-control {
				border: none;
			}
			
			.right {
				float: right;
			}
			
			.mui-control-content {
				min-height: 540px;
			}
			
			.liangzi {
				text-align: center
			}
			
			.liangzi a img {
				width: 80%;
				margin: 10px 0px;
			}
			
			.mui-content>.mui-table-view:first-child {
				margin-top: 10px !important;
			}
			
			.peixun_one {
				height: 0.7rem;
				width: 1.4rem;
				line-height: 0.7rem;
				background-color: #fba94f;
				color: #fff;
				text-align: center;
				border-radius: 5px 5px;
				margin-left: 10px;
				margin-top: 10% !important;
			}
			
			.mui-btn-primary {
				border: 1px solid #33C3CB;
				background: #3ccad0;
				border-radius: 10px;
				width: 100%;
				height: 0.9rem;
				font-size: 15px;
			}
			
			.serviceitem {
				font-size: 14px;
				margin-top: 0;
				margin-bottom: 10px;
				color: #8f8f94;
			}
			
			.mui-table-view-cell {
				position: relative;
				overflow: hidden;
				padding: 11px 15px;
				-webkit-touch-callout: none;
				line-height: 30px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="ptitle">订单详情</h1>
		</header>
		<div class="mui-content" id="content">
			<div class="mui-row" id="orderBtn" style="background-color: #FFF;margin-top: 5px;margin-bottom: 5px;">
				<div class="mui-col-sm-3 mui-col-xs-3 liangzi">
					<a href="javascript:void(0)" id="wycf" style="display: inline;" class="mui-confirm-button" data-status="0"><img id="cum-wycf" src="../images/order/wycf.png" /></a>
				</div>
				<div class="mui-col-sm-3 mui-col-xs-3 liangzi">
					<a href="javascript:void(0)" id="ksly" style="display: inline;" class="mui-confirm-button"><img id="cum-ksly" src="../images/order/kslybky.png" /></a>
				</div>
				<div class="mui-col-sm-3 mui-col-xs-3 liangzi">
					<a href="javascript:void(0)" id="tdbt" style="display: inline;" class="mui-confirm-button"><img id="cum-tdbt" src="../images/order/td.png" /></a>
				</div>
				<div class="mui-col-sm-3 mui-col-xs-3 liangzi">
					<ul class="dot_qiangdan_dot left">
						<li class="peixun_one">培训系统</li>
						<li class="peixun_one">应急培训</li>
					</ul>
				</div>
			</div>
			<div id="dtl">
				<div id="ordera"></div>
				<div id="orderb"></div>
			</div>
			<div class="mui-row" style="background-color: #FFF;margin-top: 5px;margin-bottom: 5px;">
				<div class="mui-col-sm-12 mui-col-xs-12" id="contentBtn">
				</div>
				<div class="mui-col-sm-12 mui-col-xs-12" id="contentCfr" style="display:none">
					<div class="mui-content-padded"><button class="mui-btn mui-btn-block mui-btn-primary"><span>确认订单已完成</span></button></div>
				</div>
				<div class="mui-col-sm-12 mui-col-xs-12">
					<div class="mui-content-padded">
						<p style="color: #AA0000;"><span>温馨提示：</span></p>
						<p style="color: #AA0000;"><span>请您确认完成服务后，点击【添加护理记录】，代表您已经完成本次服务。</span></p>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/app.js"></script>
	<script type="text/javascript" src="../js/constants.js"></script>
	<script type="text/javascript" src="../js/sharemethods.js"></script>
	<script type="text/javascript" src="../js/xiangyingshi.js"></script>
	<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="../js/mui.zoom.js"></script>
	<script type="text/javascript" src="../js/mui.previewimage.js"></script>

	<script type="text/javascript" src="../plugs/moment/moment.min.js"></script>
	<script type="text/javascript" src="../plugs/art/template-web.js"></script>
	<script type="text/javascript" src="../plugs/qs/qs.art.extend.js"></script>
	<script type="text/javascript" src="../plugs/qs/qs.template.js"></script>
	<script>
		mui.plusReady(function() {
			setPagePos();
			mui.init({
				swipeBack: true, //启用右滑关闭功能
				beforeback: function() {
					//获得列表界面的webview
					var i = plus.webview.getWebviewById("subpages/tab-webview-subpage-service.html");
					if(i) {
						//触发列表界面的自定义事件（refresh）,从而进行数据刷新
						i.evalJS("refWaitService()");
					}
					return true;
				}
			});
			mui('.mui-scroll-wrapper').scroll({
				indicators: true //是否显示滚动条
			});
			mui.previewImage();
			var self = plus.webview.currentWebview();
			var orderId = self.orderId;
			var userId = localStorage.getItem("USERID");
			var orderUrl = getorderdetailUrl + orderId;
			var order = null;
			var orderSub = null;

			var ordersussess = function(data) {
				if(data.result == "success") {
					order = data.obj;
					orderSub = data.sub;
					data.obj.spanCuTimes = true;
					$("#ordera").processTL(templateRegister.ordera, data.obj)
					$.processTLE(templateRegister.orderb, data.obj, function(html) {
						$("#orderb").append(html);
						if(order.orderSericedCount == order.price.time) { //已完成订单
							$("#spanCuTimes").html("已完成");
							$("#orderBtn").hide()
							$("#contentCfr").show()
						} else {
							$("#contentCfr").hide()
						}
					});

					orderSub.forEach(function(value, index, array) {
						if(value.serviceNumber == order.serviceNumber) {
							if(value.status == 1) {
								$("#wycf").attr('data-status', '1');
								$("#cum-wycf").attr('src', "../images/order/wydd.png");
							} else if(value.status == 2) {
								$("#wycf").attr('data-status', '2');
								$("#cum-wycf").attr('src', "../images/order/wylk.png");
								$("#cum-ksly").attr('src', "../images/order/ksly.png");
							} else if(value.status == 3) {
								$("#wycf").attr('data-status', '3');
								$("#cum-ksly").attr('src', "../images/order/kslybky.png");
								$("#cum-wycf").attr('src', "../images/order/wycfbky.png");
							}
						}
					});

					for(var i = 0; i < order.orderSericedCount; i++) {
						var str = '<div class="mui-content-padded"><button class="mui-btn mui-btn-block mui-btn-warning" data-count="' + (i + 1) + '"><span>添加第' + (i + 1) + '次服务工作记录</span></button></div>'
						$("#contentBtn").append(str);
					}
				} else {
					mui.toast(data.msg);
				}
			};

			commonHttpUtils(orderUrl, "get", {
				id: orderId
			}, ordersussess, error);

			mui(".mui-content").on("click", ".mui-confirm-button", function() {
				$this = $(this);
				if(order && this.id == "wycf") {
					var status = $this.attr("data-status");
					if(status == "0") { //我已经出发
						var url = addorderstarttimeUrl + order._id;
						var sussess = function(data) {
							console.log(JSON.stringify(data))
							//服务器返回响应，根据响应结果，分析是否登录成功；
							if(data.result == "success") {
								$this.attr("data-status", "1");
								$("#cum-wycf").attr('src', "../images/order/wydd.png");
							} else {
								mui.toast(data.msg);
							}
						};
						commonHttpUtils(url, "put", {
							serviceNumber: order.serviceNumber
						}, sussess, error);
					} else if(status == "1") { //我已经到达
						var url = addorderarrivetimeUrl + order._id;
						var sussess = function(data) {
							console.log(JSON.stringify(data))
							//服务器返回响应，根据响应结果，分析是否登录成功；
							if(data.result == "success") {
								$this.attr("data-status", "2");
								$("#cum-wycf").attr('src', "../images/order/wylk.png");
								$("#cum-ksly").attr('src', "../images/order/ksly.png");

								mui.openWindow({
									url: '../order/wait_service_order_record.html',
									id: 'order/wait_service_order_record.html',
									extras: {
										orderId: orderId,
										serviceNumber: order.serviceNumber
									},
									show: {
										autoShow: false, //页面loaded事件发生后自动显示，默认为true
										event: 'loaded' //页面显示时机，默认为titleUpdate事件时显示
									},
									waiting: {
										autoShow: true //自动显示等待框，默认为true
									}
								});

							} else {
								mui.toast(data.msg);
							}
						};
						commonHttpUtils(url, "put", {
							serviceNumber: order.serviceNumber
						}, sussess, error);
					} else if(status == "2") {
						//向后台发送数据 本次订单已经完成
						var url = addorderleavetimeUrl + order._id;
						var sussess = function(data) {
							console.log(JSON.stringify(data))
							//服务器返回响应，根据响应结果，分析是否登录成功；
							if(data.result == "success") {
								$this.attr("data-status", "3");
								$("#cum-ksly").attr('src', "../images/order/kslybky.png");
								$("#cum-wycf").attr('src', "../images/order/wycfbky.png");
								var str = '<div class="mui-content-padded"><button class="mui-btn mui-btn-block mui-btn-warning" data-count="' + order.serviceNumber + '"><span>添加第' + order.serviceNumber + '次服务工作记录</span></button></div>'
								$("#contentBtn").append(str);
								if(order.serviceNumber == order.price.time) {
									$("#contentCfr").show()
								}
							} else {
								mui.toast(data.msg);
							}
						};
						commonHttpUtils(url, "put", {
							serviceNumber: order.serviceNumber
						}, sussess, error);
					}
				} else if(order && this.id == "ksly") {
					var status = $("#wycf").attr("data-status");
					if(status == "2") {
						mui.openWindow({
							url: '../order/wait_service_order_record.html',
							id: 'order/wait_service_order_record.html',
							extras: {
								orderId: orderId,
								serviceNumber: order.serviceNumber
							},
							show: {
								autoShow: false, //页面loaded事件发生后自动显示，默认为true
								event: 'loaded' //页面显示时机，默认为titleUpdate事件时显示
							},
							waiting: {
								autoShow: true //自动显示等待框，默认为true
							}
						});

					} else {
						alert("还没有到达地点");
					}
				} else if(order && this.id == "tdbt") {
					var status = $("#wycf").attr("data-status");
					if(status == "3") {
						alert("订单完成不允许退单");
					} else {
						alert("退单");
					}
				}
			});
			mui("#contentBtn").on("click", ".mui-btn", function() {
				$this = $(this);
				var orderSubCount = $(this).attr("data-count");
				var orderId = order._id;
				mui.openWindow({
					url: '../order/wait_service_order_log.html',
					id: 'wait_service_order_log',
					extras: {
						orderId: orderId,
						orderSubCount: orderSubCount
					},
					show: {
						autoShow: true, //页面loaded事件发生后自动显示，默认为true
					},
					waiting: {
						autoShow: true, //自动显示等待框，默认为true
						title: '正在加载...', //等待对话框上显示的提示内容
					}
				});
			});

			mui("#contentCfr").on("click", ".mui-btn", function() {
				//向后台发送数据 本次订单已经完成
				var url = confirmserviceUrl + order._id;
				var sussess = function(data) {
					console.log(JSON.stringify(data))
					//服务器返回响应，根据响应结果，分析是否登录成功；
					if(data.result == "success") {
						mui.back();
						self.close(true)
						mui.toast("订单完成");
					} else {
						mui.toast(data.msg);
					}
				};
				commonHttpUtils(url, "put", {}, sussess, error);
			});

		});
	</script>

</html>